<script lang="ts">
export default {
  name: "MenuItems",
};
</script>

<script setup lang="ts">
import { ElSubMenu, ElMenuItem } from "element-plus";
import XtIcon from "../../../..//components/xt-icon/src/main.vue";
import { Menu as IconMenu } from "@element-plus/icons-vue";
import Typings from "../../../../typings";

interface Props {
  menuList: Typings.Menu.item[];
}

withDefaults(defineProps<Props>(), {
  menuList: () => [],
});
</script>

<template>
  <template v-for="item in menuList" :key="item.path">
    <el-sub-menu :index="item.path" v-if="item.children?.length">
      <template #title>
        <xt-icon><IconMenu /></xt-icon>
        <span>{{ item.title || item.meta?.title }}</span>
      </template>
      <MenuItems :menuList="item.children" />
    </el-sub-menu>
    <el-menu-item :index="item.path" v-else>
      <!-- <xt-icon><IconMenu /></xt-icon> -->
      <template #title>{{ item.title || item.meta?.title }}</template>
    </el-menu-item>
  </template>
</template>
